
/**
 * @description  : demo 示例
 * @descriptionDetail :   使用说明：
  1、子组件中必须引入 MescrollMixin,MescrollMoreItemMixin，并mixin
  2、当前组件必须引入MescrollMoreMixin，并mixin
  3、me-table中 i,index名称不能变，
    ref名称必须是以mescrollItem下标；
    tabs标签的页码命名必须是tabIndex
  1.0版本，后续再完善
 * @copyright    : 浙江烟草
 * @author       : mc
 * @create       : 2022-12-05 16:15:51
 */
<template>
  <view>
    <view class="table-header">
      <u-tabs :list="tabList" :is-scroll="false" :current="tabIndex" @change="handlerChangeTab"></u-tabs>
    </view>
    <view class="table-body">
      <me-table
        :top="80"
        :i="0"
        :index="0"
        :load-data="loadData"
        :init-load="false"
        v-show="tabIndex==0" 
        ref="mescrollItem0"
      >
        <template slot-scope="d">
          <view :class="'news-li li-' + d.index">
            <view>待评价 {{ d.data.title }}</view>
            <view class="new-content">
              {{ d.data.content }}
            </view>
          </view>
        </template>
      </me-table>
      <me-table
        :top="80"
        :i="1"
        :index="0"
        :load-data="loadData"
        :init-load="false"
        v-show="tabIndex==1" 
        ref="mescrollItem1"
      >
        <view :class="'news-li li-' + d.index" slot-scope="d">
          <view>待评价 {{ d.data.title }}</view>
          <view class="new-content">
            {{ d.data.content }}
          </view>
        </view>
      </me-table>
      <me-table
        :top="80"
        :i="2"
        :index="0"
        :load-data="loadData"
        :init-load="false"
        v-show="tabIndex==2" 
        ref="mescrollItem2"
      >
        <view :class="'news-li li-' + d.index" slot-scope="d">
          <view>待评价 {{ d.data.title }}</view>
          <view class="new-content">
            {{ d.data.content }}
          </view>
        </view>
      </me-table>
    </view>
  </view>
</template>
<script>
import meTable from '@/components/me-table.vue'
import MescrollMoreMixin from "@/components/mescroll-uni/mixins/mescroll-more.js";

export default {
  components: { meTable, },
  mixins: [MescrollMoreMixin,],
  data() {
    return {
      tabList: [{
        name: '待收货',
      }, {
        name: '待付款',
      }, {
        name: '待评价',
        count: 5,
      },],
      tabIndex: 0,
    }
  },
  created() {
    console.log(this);
  },

  methods: {
    loadData(page) {
      console.log(this.tabIndex, "分页参数", page);
      return new Promise(resolve => {
        setTimeout(() => {
          let list = [];
          // 设置列表数据
          for (let k = 0; k < 10; k ++) {
            list.push({title: list.length + 1, content: "这是第" + (list.length + 1),});
          }
          resolve({"data": list,});
        }, 1000);
      });
    },
    handlerChangeTab(curr) {
      this.tabIndex = curr;
      this.$refs["mescrollItem" + curr].refresh();
    },
  },
}
</script>
<style scoped>
.table-header {
  height: 80px;
  position: fixed;
  width: 100%;
  z-index: 999;
}
.table-body {
  
}
	/*展示上拉加载的数据列表*/
	.news-li{
		font-size: 32rpx;
		padding: 32rpx;
		border-bottom: 1rpx solid #eee;
	}
	.news-li .new-content{
		font-size: 28rpx;
		margin-top: 10rpx;
		margin-left: 20rpx;
		color: #666;
	}
</style>